<template>
  <view class="user-container">
    <!-- 未登录状态 -->
    <view v-if="!isLoggedIn" class="not-logged-in">
      <view class="user-info">
        <image class="avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
        <text class="username">未登录</text>
        <text class="tips">登录后享受更多服务</text>
      </view>
      
      <button class="login-btn" @tap="goToLogin">立即登录</button>
    </view>
    
    <!-- 已登录状态 -->
    <view v-else class="logged-in">
      <view class="user-info">
        <view class="avatar-section">
          <image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill"></image>
        </view>
        <view class="info-section">
          <text class="username">{{ userInfo.nickName || '微信用户' }}</text>
          <text class="user-id">ID: {{ userInfo.id || '未知' }}</text>
          <text class="user-phone" v-if="userInfo.phone">手机: {{ userInfo.phone }}</text>
          <text class="user-gender" v-if="userInfo.gender && userInfo.gender !== 'unknown'">
            性别: {{ userInfo.gender === 'male' ? '男' : userInfo.gender === 'female' ? '女' : '未知' }}
          </text>
        </view>
        <view class="edit-profile" @tap="editProfile">
          <text>编辑资料</text>
        </view>
      </view>
      
      <view class="user-stats">
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.orderCount || 0 }}</text>
          <text class="stat-label">订单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.couponCount || 0 }}</text>
          <text class="stat-label">优惠券</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">{{ userInfo.points || 0 }}</text>
          <text class="stat-label">积分</text>
        </view>
      </view>
    </view>
    
    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-group">
        <view class="menu-item" @tap="navigateTo('/pages/orders/orders')">
          <view class="menu-left">
            <image class="menu-icon" src="/static/orders-icon.png" mode="aspectFit"></image>
            <text class="menu-title">我的订单</text>
          </view>
          <view class="menu-right">
            <text class="menu-badge" v-if="userInfo.unpaidOrderCount > 0">{{ userInfo.unpaidOrderCount }}</text>
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="menu-item" @tap="navigateTo('/pages/coupons/coupons')">
          <view class="menu-left">
            <image class="menu-icon" src="/static/coupon-icon.png" mode="aspectFit"></image>
            <text class="menu-title">优惠券</text>
          </view>
          <view class="menu-right">
            <text class="menu-badge" v-if="userInfo.availableCouponCount > 0">{{ userInfo.availableCouponCount }}</text>
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="menu-item" @tap="navigateTo('/pages/addresses/addresses')">
          <view class="menu-left">
            <image class="menu-icon" src="/static/address-icon.png" mode="aspectFit"></image>
            <text class="menu-title">收货地址</text>
          </view>
          <view class="menu-right">
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      
      <view class="menu-group">
        <view class="menu-item" @tap="navigateTo('/pages/settings/settings')">
          <view class="menu-left">
            <image class="menu-icon" src="/static/settings-icon.png" mode="aspectFit"></image>
            <text class="menu-title">设置</text>
          </view>
          <view class="menu-right">
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
        
        <view class="menu-item" @tap="navigateTo('/pages/about/about')">
          <view class="menu-left">
            <image class="menu-icon" src="/static/about-icon.png" mode="aspectFit"></image>
            <text class="menu-title">关于我们</text>
          </view>
          <view class="menu-right">
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
      
      <view class="menu-group" v-if="isLoggedIn">
        <view class="menu-item logout-item" @tap="logout">
          <view class="menu-left">
            <image class="menu-icon" src="/static/logout-icon.png" mode="aspectFit"></image>
            <text class="menu-title">退出登录</text>
          </view>
          <view class="menu-right">
            <image class="arrow-icon" src="/static/arrow-right.png" mode="aspectFit"></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import api from '@/utils/api.js';

export default {
  data() {
    return {
      isLoggedIn: false,
      userInfo: {}
    };
  },
  onShow() {
    this.checkLoginStatus();
  },
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const token = uni.getStorageSync('token');
      const userInfo = uni.getStorageSync('userInfo');
      
      if (token && userInfo) {
        this.isLoggedIn = true;
        this.userInfo = userInfo;
        this.loadUserInfo();
      } else {
        this.isLoggedIn = false;
        this.userInfo = {};
      }
    },
    
    // 加载用户信息
    loadUserInfo() {
      api.getUserInfo().then(res => {
        if (res.customer) {
          this.userInfo = res.customer;
          // 更新本地存储的用户信息
          uni.setStorageSync('userInfo', res.customer);
        }
      }).catch(err => {
        console.error('获取用户信息失败:', err);
      });
    },
    
    // 跳转到登录页
    goToLogin() {
      uni.navigateTo({
        url: '/pages/login/login'
      });
    },
    
    // 页面导航
    navigateTo(url) {
      if (!this.isLoggedIn) {
        this.goToLogin();
        return;
      }
      
      uni.navigateTo({
        url: url
      });
    },
    
    // 退出登录
    logout() {
      uni.showModal({
        title: '提示',
        content: '确定要退出登录吗？',
        success: (res) => {
          if (res.confirm) {
            // 清除本地存储
            uni.removeStorageSync('token');
            uni.removeStorageSync('userInfo');
            
            // 更新页面状态
            this.isLoggedIn = false;
            this.userInfo = {};
            
            uni.showToast({
              title: '已退出登录',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 编辑资料
    editProfile() {
      uni.navigateTo({
        url: '/pages/profile/profile'
      });
    }
  }
};
</script>

<style lang="scss">
.user-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.not-logged-in, .logged-in {
  background-color: #fff;
  padding: 60rpx 40rpx 40rpx;
  
  .user-info {
      display: flex;
      align-items: center;
      padding: 40rpx;
      
      .avatar-section {
        margin-right: 30rpx;
        
        .avatar {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }
      
      .info-section {
        flex: 1;
        
        .username {
          font-size: 36rpx;
          font-weight: bold;
          color: #333;
          display: block;
          margin-bottom: 10rpx;
        }
        
        .user-id, .user-phone, .user-gender {
          font-size: 28rpx;
          color: #999;
          margin-top: 8rpx;
        }
      }
      
      .edit-profile {
        padding: 16rpx 32rpx;
        background-color: #07c160;
        color: white;
        border-radius: 30rpx;
        font-size: 28rpx;
      }
    }
  
  .login-btn {
    width: 80%;
    height: 80rpx;
    background-color: #07c160;
    color: white;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    margin: 60rpx auto 0;
  }
}

.logged-in {
  .user-stats {
    display: flex;
    justify-content: space-around;
    margin-top: 40rpx;
    
    .stat-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      
      .stat-value {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .stat-label {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}

.menu-section {
  margin-top: 20rpx;
  
  .menu-group {
    background-color: #fff;
    margin-bottom: 20rpx;
    
    .menu-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 40rpx;
      border-bottom: 1px solid #f0f0f0;
      
      &:last-child {
        border-bottom: none;
      }
      
      .menu-left {
        display: flex;
        align-items: center;
        
        .menu-icon {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }
        
        .menu-title {
          font-size: 32rpx;
          color: #333;
        }
      }
      
      .menu-right {
        display: flex;
        align-items: center;
        
        .menu-badge {
          background-color: #ff4d4f;
          color: white;
          font-size: 20rpx;
          padding: 4rpx 12rpx;
          border-radius: 20rpx;
          margin-right: 10rpx;
        }
        
        .arrow-icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }
    
    .logout-item {
      .menu-left .menu-title {
        color: #ff4d4f;
      }
    }
  }
}
</style>